import React, { Component } from 'react';
import cns from 'classnames/bind';
import styles from './app.css';
import { Layout, Menu, Breadcrumb, Avatar, Icon } from 'antd';
import Home from 'containers/Home/Home';
import Blog from 'containers/Blog/Blog';
import Document from 'containers/Document/Document';

const { SubMenu } =  Menu;
const cx = cns.bind(styles);
const { Header, Content, Footer } = Layout;

export default class App extends Component {
  render() {
    return(
      <Layout>
        <Header>
          <div className={cx('logo')}>
            Sma2lBao
          </div>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['1']}
            style={{ lineHeight: '64px', float: 'left' }}
          >
            <Menu.Item key="1">首页</Menu.Item>
            <Menu.Item key="2">应用</Menu.Item>
            <Menu.Item key="3">博客</Menu.Item>
            <Menu.Item key="4">关于</Menu.Item>
          </Menu>
          <div className={cx('tool')}>
            <Icon type="bell" className={cx('bell-menu')} />
            <Avatar size="default" style={{ verticalAlign: 'middle' }} />
          </div>
        </Header>
        <Breadcrumb style={{ margin: '10px 50px' }}>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          {/* <Breadcrumb.Item>List</Breadcrumb.Item> */}
          {/* <Breadcrumb.Item>App</Breadcrumb.Item> */}
        </Breadcrumb>
        <Content style={{ minHeight: '400px', margin: '0 50px'}}>
          <Document />
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Copyright &copy; 2017 Create By Sma2lBao. All right reserved.
        </Footer>
      </Layout>
    );
  }
}
